<template>
  <el-container>
    <el-breadcrumb separator-class="el-icon-arrow-right" style="font-size: 16px;">
      <el-breadcrumb-item :to="{ path: '/homeIndex' }">
        <i class="el-icon-house"></i> 床位管理
      </el-breadcrumb-item>
      <el-breadcrumb-item>床位管理</el-breadcrumb-item>
    </el-breadcrumb>
    <el-divider></el-divider>

    <el-header>
      <el-col :span="24" class="col-in-page">
        <el-form :inline="true">
          <el-form-item label="区域">
            <el-select placeholder="请选择" v-model="orderParam.areaid" @change="queryRooms()">
              <el-option v-for="area in areas" :key="area.id" :label="area.name" :value="area.id"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="房间">
            <el-select placeholder="请选择" v-model="orderParam.roomid">
              <el-option
                v-for="room in rooms"
                :key="room.id"
                :label="room.roomnum"
                :value="room.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="床位状态">
            <el-select placeholder="请选择" v-model="orderParam.enable">
              <el-option
                v-for="bedStatus in bedStatuses"
                :key="bedStatus.id"
                :label="bedStatus.name"
                :value="bedStatus.id"
              ></el-option>
            </el-select>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" icon="el-icon-search" @click="queryBedByDetail">查询</el-button>
            <el-button type="primary" icon="el-icon-refresh" @click="clear">重置</el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-header>
    <el-main>
      <el-col :span="24">
        <el-card class="box-card">
          <div class="area-display">区域: {{ currentArea }}</div>
          <div class="flex-container">
            <div class="flex-item">
              <div class="square1"></div>
              <p class="text">一级护理</p>
            </div>
            <div class="flex-item">
              <div class="square2"></div>
              <p class="text">二级护理</p>
            </div>
            <div class="flex-item">
              <div class="square3"></div>
              <p class="text">三级护理</p>
            </div>
            <div class="flex-item">
              <div class="square4"></div>
              <p class="text">特级护理</p>
            </div>
          </div>
          <el-row :gutter="10">
            <el-col v-for="(item, index) in tableData" :key="index" :span="6">
              <el-card class="inner-card" style="margin-bottom: 10px;">
                <div
                  style="position: relative; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center;"
                >
                  <div
                    v-bind:style="{
            position: 'absolute',
            left: '10px',
            top: '10px',
            borderRadius: '50%',
            padding: '10px',
            background: numberColorMapping[item.number]
        }"
                  >{{ item.number }}</div>

                  <img
                    v-if="item.enable === 0"
                    src="http://192.168.2.202:9000/elderlycare/elderlycare_1713510753137.png"
                    style="width: 120px; transform: translateY(50px);"
                  />
                </div>
                <div
                  v-if="item.status === 0"
                  style="position: absolute; right: 10px; bottom: 10px; color: red; background-color: #ffcccc; padding: 5px; border-radius: 5px;"
                >已禁用</div>
                <!-- 当 item.enable 为 0, 即有图片时, 在图片上方显示房间信息以及"空床"字样并添加特效 -->
                <div
                  v-if="item.enable === 0"
                  style="position: absolute; padding: 50px 30px;font-weight: bold; font-size: 20px;color: black; font-weight: bold; font-size: 20px; "
                >
                  房间: {{ item.roomnum }}
                  <span
                    style="color: #ADD8E6; text-shadow: 2px 2px 4px #000000;"
                  >空床</span>
                </div>
                <!-- 当 item.enable 不为 0, 即没有图片时, 保持原来样式在卡片底部显示房间信息 -->
                <div
                  v-else
                  style="text-align:center;  color: black; font-weight: bold; font-size: 20px; "
                >房间: {{ item.roomnum }}</div>
                <!-- 当 item.enable 不为 0, 即没有图片时, 显示用户信息 -->
                <div v-if="item.enable !== 0" class="user-info">
                  <!-- 引入用户信息 -->
                  <el-row>
                    <el-col :span="8">
                      <!-- 获取用户头像 -->
                      <div class="circle-num" v-if="users[item.id]">
                        <img
                          :src="users[item.id].icon"
                          alt="Avatar"
                          style="width:60px; height:70px;"
                        />
                      </div>
                    </el-col>
                    <el-row>
                      <el-col :span="8">
                        <!-- 获取用户名 -->
                        <div
                          style="font-weight:bold;font-size:15px;"
                          v-if="users[item.id]"
                        >{{ users[item.id].name }}</div>
                      </el-col>
                      <el-col :span="4">
                        <!-- 获取用户性别 -->
                        <div
                          v-if="users[item.id] && users[item.id].gender === 1"
                          style="font-size:15px;"
                        >男</div>
                        <div v-else>女</div>
                      </el-col>
                      <el-col :span="4">
                        <!-- 获取用户年龄 -->
                        <div v-if="users[item.id]">{{ users[item.id].age }}岁</div>
                      </el-col>
                      <!-- 获取用户社保状态 -->
                      <div
                        v-if="users[item.id] && users[item.id].socialStatus === 0"
                        style="font-size:15px;"
                      >职工社保</div>
                      <div v-else>居民社保</div>
                      <div
                        style="font-size:15px;"
                        v-if="users[item.id]"
                      >责任护士: {{ users[item.id].nurseName }}</div>
                      <div
                        :style="{ color: nursingColors[users[item.id].nursingName], 
                        textShadow: '2px 2px 4px rgba(1, 1, 1, 0.3)',fontSize: '18px', fontWeight: 'bold'}"
                        v-if="users[item.id]"
                      >护理级别: {{ users[item.id].nursingName }}</div>
                      <div
                        style="font-size:15px;margin-top:15px"
                        v-if="users[item.id]"
                      >入院时间: {{ users[item.id].inTime }}</div>
                    </el-row>
                  </el-row>
                  <!-- 其他内容 -->
                  <div v-if="item.enable !== 0">
                    <el-dropdown
                      trigger="click"
                      placement="top-end"
                      style="position: absolute; bottom: 10px; right: 10px;"
                    >
                      <el-button class="el-icon-arrow-down" circle></el-button>
                      <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item @click.native="transferRoom(item.id)">
                          <i class="icon-promotion el-icon-s-promotion"></i> 转房
                        </el-dropdown-item>
                        <el-dropdown-item @click.native="transferBed(item.id)">
                          <i class="icon-finance el-icon-s-finance"></i> 转床
                        </el-dropdown-item>
                      </el-dropdown-menu>
                    </el-dropdown>
                  </div>
                </div>
              </el-card>
            </el-col>
          </el-row>
          <!-- 放分页部分 -->
          <el-pagination
            background
            :page-sizes="[4, 8, 12, 20]"
            :page-size="pageSize"
            :current-page="pageNum"
            layout="total, sizes, prev, pager, next"
            @next-click="nextPage"
            @prev-click="prevPage"
            @size-change="sizeChange"
            @current-change="currentPage"
            :total="total"
          ></el-pagination>
        </el-card>
      </el-col>
    </el-main>
  </el-container>
</template>

<script>
export default {
  data() {
    return {
      nursingColors: {
        一级护理: "red",
        二级护理: "blue",
        三级护理: "green",
        特级护理: "purple"
      },
      numberColorMapping: {
        "01": "#f0b8b8", // 浅红色
        "02": "#b8f0b8", // 浅绿色
        "03": "#b8b8f0", // 浅蓝色
        "04": "#f0f0b8", // 淡黄色
        "05": "#b8f0f0", // 浅青色
        "06": "#f0b8f0" // 浅紫色
      },
      pageNum: 1,
      pageSize: 12,
      total: 0,
      bedStatuses: [
        { id: 0, name: "空余床位" },
        { id: 1, name: "已占床位" }
      ],
      orderParam: {
        areaid: "",
        roomid: "",
        enable: "",
        elderName: ""
      },
      tableData: [],
      areas: [],
      rooms: [],
      users: [],
      currentArea: "全部区域"
    };
  },
  methods: {
    prevPage(val) {
      //点击上一页触发
      this.pageNum = val;
      this.queryBedByDetail();
    },
    nextPage(val) {
      //点击下一页触发
      this.pageNum = val;
      this.queryBedByDetail();
    },
    sizeChange(val) {
      //val每一页条数
      this.pageNum = 1;
      this.pageSize = val;
      this.queryBedByDetail();
    },
    currentPage(val) {
      this.pageNum = val;
      this.queryBedByDetail();
    },
    queryCondition() {
      thispageNum = 1;
      this.queryBedByDetail();
    },
    queryBedByDetail() {
      //带分页参数pageNum,pageSize
      let pageParam = {};
      pageParam.pageNum = this.pageNum;
      pageParam.pageSize = this.pageSize;
      pageParam.param = this.orderParam;
      this.$axios.post("api/bed/queryBedByDetail", pageParam).then(res => {
        if (res.data.code == 200) {
          let pageData = res.data.data;
          this.tableData = pageData.list;

          //给分页参数赋值
          this.total = pageData.total;
          this.pageNum = pageData.pageNum;
          this.pageSize = pageData.pageSize;

          // 遍历表格数据获取用户信息...
          for (let item of this.tableData) {
            if (item.enable !== 0) {
              this.fetchUserInfo(item.id);
            }
          }
        } else {
          this.$router.push({ path: "/login" });
        }
      });
    },
    clear() {
      this.orderParam = {};
      this.cards = [];
    },
    //查找所有区域
    queryAllArea() {
      this.$axios.get("api/bed/queryAllArea").then(res => {
        if (res.data.code == 200) {
          this.areas = res.data.data;
        }
      });
    },
    //根据区域查询房间
    queryRooms() {
      if (this.orderParam.areaid) {
        this.$axios
          .get(`api/bed/queryByAreaId/${this.orderParam.areaid}`)
          .then(res => {
            if (res.data.code == 200) {
              this.rooms = res.data.data;
            }
          });
      } else {
        this.rooms = [];
      }
    },
    fetchUserInfo(id) {
      this.$axios.get(`api/bed/queryUserByBedId/${id}`).then(res => {
        if (res.data.code == 200) {
          // 注意这里的改变
          this.$set(this.users, id, res.data.data);
        } else {
          alert("获取用户信息失败");
        }
      });
    },
    transferRoom(val) {
      // 实现转房的逻辑
      this.$router.push({ path: "/bedChangeRoom", query: { bedid: val } });
    },
    transferBed(val) {
      // 实现转床的逻辑
      this.$router.push({ path: "/bedChangeBed", query: { bedid: val } });
    }
  },
  created() {
    this.queryAllArea();
    this.queryBedByDetail();
  },
  watch: {
    // 当 orderParam.areaid 变化时，更新 currentArea
    "orderParam.areaid"(newVal, oldVal) {
      const selectedArea = this.areas.find(area => area.id === newVal);
      this.currentArea = selectedArea ? selectedArea.name : "全部区域";
    }
  }
};
</script>

<style scoped>
.inner-card {
  position: relative;
  width: 300px;
  height: 250px;
}
.user-info {
  margin-top: 50px;
}
.area-display {
  margin-bottom: 20px; /* 为`区域:`这一行下方添加空间 */
  font-size: 18px; /* 增加字体大小 */
  font-weight: bold; /* 字体加粗 */
  color: #333; /* 字体颜色，你可以根据你的页面主题更改这里 */
}
.text {
  margin-left: 5px;
}
.square1 {
  width: 15px;
  height: 15px;
  background-color: red;
  display: inline-block;
}

.square2 {
  width: 15px;
  /* 或者你想设置的大小 */
  height: 15px;
  /* 或者你想设置的大小 */
  background-color: blue;
  /* 或者你想设置的颜色 */
  display: inline-block;
}

.square3 {
  width: 15px;
  /* 或者你想设置的大小 */
  height: 15px;
  /* 或者你想设置的大小 */
  background-color: green;
  /* 或者你想设置的颜色 */
  display: inline-block;
}

.square4 {
  width: 15px;
  /* 或者你想设置的大小 */
  height: 15px;
  /* 或者你想设置的大小 */
  background-color: purple;
  /* 或者你想设置的颜色 */
  display: inline-block;
}
.flex-item {
  display: flex;
  align-items: center;
  margin: 0 10px; /* 这会在每个方框的左右两侧各添加10px的间距 */
}
.flex-container {
  display: flex;
  justify-content: flex-start;
  margin-bottom: 20px; /* 这里设置下方的margin为20px */
}
.el-table {
  margin-top: 20px;
  border-radius: 5px;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
}
.el-form-item {
  margin: 20px 50px;
}
.el-button {
  border-radius: 20px;
  text-align: center; /* 文字居中  */
  border: none;
  color: white; /* 文字颜色白色  */
  cursor: pointer;
  display: inline-block;
  background: linear-gradient(
    to right,
    rgb(176, 119, 218),
    rgb(129, 214, 238)
  ); /* 渐变效果更换为浅紫色到浅蓝色 */
  transition-property: background-color, transform; /* 添加过渡属性 */
  transition-duration: 0.3s; /* 过渡持续时间 */
}
.el-button:hover {
  transform: scale(1.1); /* 按钮放大效果  */
  transition: transform 0.3s ease-in-out;
}
.el-pagination {
  margin-top: 20px; /* 或者你觉得合适的值 */
}
.col-in-page {
  margin: 0rem;
  padding: 0rem;
  background: white;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
}
</style>